<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="童佳豪">
    <title>作业07 个人主页</title>
</head>
<style type="text/css">
    body {
        margin: 0 auto;
        background-color: #ecfafe;
        width: 700px;
        font-size: 12px;
    }

    div {
        font-size: 12px;
    }

    #block1 {
        text-align: center;
    }

    #block2 {
        text-align: center;
        margin-top: -33px;
        margin-left: -120PX;
    }

    #block2 ul {
        display: inline-block;
        list-style: none;
        margin: 9px;
    }

    #block2 ul li {
        display: inline-block;
        float: left;
        margin-left: 65px;
    }

    #block3 {
        margin-top: -10px;
        height: 660px;
        display: inline-flex;
        position: relative;
    }

    .left li {
        text-align: center;
        font-size: 12px;
    }

    .left {
        background-image: url("./images/container_bg.jpg");
        position: absolute;
        background-size: 100% 100%;
        width: 120px;
        height: 610px;
        padding: 20px;
    }

    .right {
        position: relative;
        width: 500px;
        background: url("./images/bg1.jpg") no-repeat;
        background-size: 100% 100%;
        height: 610px;
        left: 160px;
        padding: 20px;
    }

    li {
        list-style: none;
    }

    h4 {
        color: cornflowerblue;
        text-decoration: underline;
    }

    #block4 {
        background-color: #91bcff;
        text-align: center;
        height: 20px;
        margin-top: -10px;
        width: 700px;
    }
</style>
<body>
<div>
    <div id="block1"><img src="./images/banner1.jpg"/></div>
    <div id="block2">
        <ul>
            <li>首页</li>
            <li>心情日记</li>
            <li>Free</li>
            <li>一起走到</li>
            <li>从明天起</li>
            <li>纸飞机</li>
            <li>下一站</li>
        </ul>
    </div>
    <div id="block3">
        <div class="left">
            <br>
            <ul style="padding: 0;">
            <li><img src="./images/selfpic1.jpg"/></li>
            <li>我的日记本</li>
            <p style="color: #1f3585">秋天过半的时候，我搭上了一列火车。我不知道它将要去往的方向，那铁路看上去无休无止地延伸着。</p>
            <li><img src="./images/selfpic2.jpg"/></li>
            <li>心情轨迹</li>
            <p style="color: #1f3585">无意间发见，白云的上面，长着许许多多的蒲公英。它在我面前迅速的长大，风吹过的时候，纷纷升起，飞向无数的远方。</p>
            </ul>
        </div>

        <div class="right">
            <h4>介绍</h4>
            <div style="text-indent: 1.5rem;">
                车经过一个又一个站台，窗外漫卷的蒲公英向我微笑着。我逐渐记起了自己旅行的目的，一直都在下一站的前方。火车缓缓地驶入站台，汽笛声响的那一瞬间，车厢变得透明，我看见，自己和这长长的列车一起，正在漫天飘舞着的蒲公英中飞行。
            </div>
            <h4>转播设备</h4>
            <div style="text-indent: 1.5rem;">
                我现在是在万泉河附近，我们的转播车就在旁边不远的地方，师傅马上将会把车开过来。我们的转播设备非常的先进，具体怎么先进我也说不清，师傅比我清楚，总之就是特别特别先进。好，现在师傅已经把转播车开过来了。……
            </div>
            <h4>旅程</h4>
            <ul style="padding-left: 0">
                <li>夕阳 染红蓝天</li>
                <li>带走 美好的一天</li>
                <li>风 吹过大地</li>
                <li>炫美的世界</li>
                <br>
                <li>霞光 点亮星辰</li>
                <li>燃起 辽远的梦幻</li>
                <li>流星 划过夜空</li>
                <li>忆起 逝夜的歌声</li>
                <br>
                <li>是谁昨夜背上行囊</li>
                <li>唱一首满载风尘的歌</li>
                <li>今夜才又想起拥抱的时刻</li>
                <br>
                <li>独自走的一段旅程</li>
                <li>是否还装满苦涩</li>
                <li>一路风雨飘摇 那坎坷对谁说</li>
                <br>
                <li>来吧看这远处亮起的点点星火</li>
                <li>伸手触摸那写在匆匆旅程的歌</li>
                <li>谁在转过的街口从容挥手</li>
                <li>谁用欢笑和拥抱</li>
                <li>记住这一刻</li>
            </ul>
        </div>
    </div>
    <div id="block4">版权所有 2006.12.7 Next Station</div>


</div>
</body>
</html>